<template>
  <div class="com-nav">
    <Menu mode="horizontal" theme="dark" active-name="2" @on-select="select" style="flex:1">
      <MenuItem name="/phone"> 手机
      </MenuItem>
      <MenuItem name="/clothes"> 服饰
      </MenuItem>
      <MenuItem name="3"> 生鲜
      </MenuItem>
      <MenuItem name="/books"> 图书
      </MenuItem>
    </Menu>

    <Badge :count="count" :offset="[20,0]">
    <div class="cart" @click="onJump">
      <span>购物车</span>
      <Icon type="md-cart" style="font-size:22px;"/>
    </div>
    </Badge>

    <div class="name">
      <Dropdown trigger="click" style="cursor:pointer" @on-click="onClick">
        {{username}}
        <Icon type="ios-arrow-down"></Icon>
        <Dropdown-menu slot="list">
          <Dropdown-item name="rersonal">个人设置</Dropdown-item>
          <Dropdown-item name="logout">退出</Dropdown-item>
        </Dropdown-menu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
import service from "@/service";
import { mapState, mapActions } from "vuex";
export default {
  name: "Nav",
  data() {
    return {
      theme: "",
      name: "222333"
    };
  },
  computed:{
    ...mapState({
      username:(state)=>{
        return state.home.userName
      },
      count:(state)=>{
        return state.cart.products.length
      }
    })
  },
  methods: {
    ...mapActions(['getUserName']),
    select(name) {
      console.log(name);
      this.$router.push({ path: name });
    },
    onClick(name) {
      console.log(name)
      service.post('/v1/logout')
      .then((res)=>{
        if(res.retcode === 1) {
          this.$router.push({ name:'Login'})
        }
      })
    },
    onJump(){
      this.$router.push({ path:'/cart' })
    }
  },
  created() {
    this.getUserName()
    // service.get("/v1/getUser")
    //  .then(res => {
    //    this.name = res.userName;
    // });
  }
};
</script>
<style lang="scss">
.com-nav {
  .ivu-menu-item-active {
    background: #000;
  }
}
</style>
<style lang="scss" scoped>
.com-nav {
  display: flex;
  .name {
    width: 120px;
    background: #515a6e;
    color: #fff;
    line-height:60px;
  }
  .cart{
    background: #515a6e;
    color: #9cf;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>